<template>
  <div class="navbar">
    <div class="navbar-container">
      <div class="logo">
        <router-link to="/">“悦题”--在线评测系统</router-link>
      </div>
      
      <div class="nav-links">
        <router-link to="/" class="nav-item">首页</router-link>
        <router-link to="/problems" class="nav-item">题库</router-link>
        <router-link to="/classroom" class="nav-item">班级</router-link>
        <router-link to="/discussions" class="nav-item">讨论区</router-link>
      </div>
      
      <div class="nav-right">
        <template v-if="userStore.isLoggedIn">
          <!-- 签到按钮 -->
          <el-button
            type="primary"
            size="small"
            :icon="Calendar"
            @click="handleSignIn"
            :loading="signingIn"
            class="signin-btn"
          >
            签到
          </el-button>
          
          <!-- 积分显示 -->
          <div class="points-display" @click="goToPersonalSpace">
            <el-tooltip content="我的积分" placement="bottom">
              <div class="points-container">
                <el-icon><Medal /></el-icon>
                <span class="points-value">{{ userStore.userPoints }}</span>
              </div>
            </el-tooltip>
          </div>
          
          <div class="user-avatar" @click="goToPersonalSpace">
            <el-avatar :size="36" :src="avatarUrl" @error="handleAvatarError">
              <el-icon><UserFilled /></el-icon>
            </el-avatar>
          </div>
        </template>
        
        <template v-else>
          <router-link to="/login">
            <el-button type="primary" size="small">登录</el-button>
          </router-link>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '../store/user'
import { Calendar, Medal, UserFilled } from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const signingIn = ref(false)
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
const avatarUrl = ref(defaultAvatar)

onMounted(async () => {
  if (userStore.isLoggedIn) {
    try {
      // 尝试获取用户头像
      const response = await fetch('/api/user/download', {
        headers: {
          'Authorization': userStore.token || ''
        }
      })
      
      if (response.ok) {
        const blob = await response.blob()
        if (blob.size > 0) {
          avatarUrl.value = URL.createObjectURL(blob)
        }
      }
    } catch (error) {
      console.error('获取头像失败:', error)
    }
  }
})

function handleAvatarError() {
  avatarUrl.value = defaultAvatar
}

function goToPersonalSpace() {
  router.push('/personal')
}

async function handleSignIn() {
  if (signingIn.value) return
  
  signingIn.value = true
  try {
    const success = await userStore.signIn()
    if (success) {
      // 显示积分动画
      showPointsAnimation()
    }
  } catch (error) {
    console.error('签到失败:', error)
  } finally {
    signingIn.value = false
  }
}

function showPointsAnimation() {
  // 创建一个动画元素
  const animEl = document.createElement('div')
  animEl.className = 'points-animation'
  animEl.textContent = '+5'
  document.body.appendChild(animEl)
  
  // 获取签到按钮的位置
  const btnEl = document.querySelector('.signin-btn')
  if (btnEl) {
    const rect = btnEl.getBoundingClientRect()
    animEl.style.top = `${rect.top}px`
    animEl.style.left = `${rect.left + rect.width / 2}px`
    
    // 开始动画
    setTimeout(() => {
      animEl.classList.add('animate')
    }, 10)
    
    // 动画结束后移除元素
    setTimeout(() => {
      document.body.removeChild(animEl)
    }, 1500)
  }
}
</script>

<style scoped>
.navbar {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.logo a {
  color: #409eff;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-item {
  text-decoration: none;
  color: #606266;
  font-size: 1rem;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s;
}

.nav-item:hover, .nav-item.active {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.1);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-avatar {
  cursor: pointer;
  transition: transform 0.3s;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.points-display {
  cursor: pointer;
  transition: all 0.3s;
}

.points-container {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #f0f9eb;
  border-radius: 20px;
  padding: 3px 10px;
  color: #67c23a;
  transition: all 0.3s;
}

.points-container:hover {
  background-color: #e1f3d8;
  transform: translateY(-2px);
}

.points-value {
  font-weight: bold;
}

.signin-btn {
  transition: all 0.3s;
}

.signin-btn:hover {
  transform: translateY(-2px);
}

/* 积分动画 */
.points-animation {
  position: fixed;
  color: #67c23a;
  font-weight: bold;
  font-size: 1.5rem;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
}

.points-animation.animate {
  animation: floatUp 1.5s ease-out forwards;
}

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -70%);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -120px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -150px);
  }
}

@media (max-width: 768px) {
  .navbar-container {
    padding: 0 10px;
  }
  
  .logo {
    font-size: 1.2rem;
  }
  
  .nav-item {
    font-size: 0.9rem;
    padding: 5px 8px;
  }
}
</style>